<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="//cdn.bootcss.com/weui/1.1.1/style/weui.min.css">
    <link rel="stylesheet" href="//cdn.bootcss.com/jquery-weui/1.0.1/css/jquery-weui.min.css">
    <% include ../common/meta.ejs %>
    <% include ../common/public.ejs %>
    <link href="<%= global.config.path.publicPath %>/custom/css/customer.css" rel="stylesheet">

</head>
<body>
<% include ../common/header.ejs %>
<div class="container">
    <div class="row">
        <% include ../common/menu.ejs %>

        <div id="content" class="col-lg-10 col-sm-11">
            <div class="page-header">
                <h1>
                    文章管理
                    <small id="parseInfo">

                    </small>
                </h1>
                <div class="operationButton">
                    <button class="btn btn-default btn-primary" id="addData">
                        <span class="glyphicon glyphicon-plus"></span> 添加根节点
                    </button>
                    <button class="btn btn-default btn-info" id="addChildrenData">
                        <span class="glyphicon glyphicon-plus"></span> 添加子节点
                    </button>
                    <button class="btn btn-default btn-default" id="editData">
                        <span class="glyphicon glyphicon-pencil"></span> 修改
                    </button>
                    <button class="btn btn-default btn-default" id="removeData">
                        <span class="glyphicon glyphicon-trash"></span> 删除
                    </button>
                </div>
            </div>

            <div class="row">
                <div class="col-md-3">
                    <div class="panel panel-info">
                        <div class="panel-heading">
                            <div class="panel-title">目录</div>
                        </div>
                        <div class="panel-body">
                            <div id="dataTree"></div>
                        </div>
                    </div>
                </div>
                <div class="col-md-9">
                    <div class="panel panel-info">
                        <div class="panel-heading">
                            <div class="panel-title">目录信息</div>
                        </div>
                        <div class="panel-body">
                            <form class="form-horizontal detail-form" id="detail-form">
                                <div class="row">

                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="col-md-4 control-label">名称</label>
                                            <div class="col-md-8">
                                                <p class="form-control-static" name="name"></p>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-md-6" id="showCatalogIcon">
                                        <div class="form-group">
                                            <label class="col-md-4 control-label">目录图标</label>
                                            <div class="col-md-8" >
                                                <p class="form-control-static" id="Icon"></p>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="col-md-4 control-label">页面类型</label>
                                            <div class="col-md-8">
                                                <p class="form-control-static" options="pageType" name="pageType"></p>
                                            </div>
                                        </div>
                                    </div>


                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="col-md-4 control-label">编码</label>
                                            <div class="col-md-8">
                                                <p class="form-control-static" name="code"></p>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="col-md-4 control-label">排序</label>
                                            <div class="col-md-8">
                                                <p class="form-control-static" name="sort"></p>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="col-md-4 control-label">备注</label>
                                            <div class="col-md-8">
                                                <p class="form-control-static" name="remark"></p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-12" id="link">
                                        <div class="form-group">
                                            <label class="col-md-1 control-label">链接</label>
                                            <div class="col-md-11">
                                                <p class="form-control-static"  id="catalogUrl">

                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-12"  id="bannerImg" hidden>
                                        <div class="form-group">
                                            <label class="col-md-2 control-label">banner图片</label>
                                            <div class="bannerLists" style=""></div>
                                        </div>
                                    </div>

                                </div>
                            </form>
                        </div>
                    </div>


                    <div class="panel panel-success">
                        <div class="panel-heading">
                            <div class="panel-title">
                                <span class="glyphicon glyphicon-list-alt"></span>
                                文章列表
                                <div class="operationButton">
                                    <div class="btn-group" role="group">
                                        <button type="button" class="btn btn-primary" id="addArticleButton" disabled>添加</button>
                                        <button type="button" class="btn btn-info" id="updateArticleButton" disabled>修改</button>
                                        <button type="button" class="btn btn-default" id="removeArticleButton" disabled>删除</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="panel-body padding-0">
                            <div id="dataList"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="default-hidden">
    <!------------------------------------------ edit form modal ------------------------------------------>
    <form class="form-horizontal edit-form" id="edit-form" style="display: block">
        <div class="form-group">
            <label class="col-md-2 control-label">名称</label>
            <div class="col-md-10">
                <input class="form-control" name="name" type="text" />
            </div>
        </div>
        <div class="form-group">
            <label class="col-md-2 control-label">目录图标</label>
            <div class="col-md-1 circleListDiv" id="editIcon">
                <div class="circleList">
                    <div class="weui-grid__icon" id="editIcon-2">
                        <img src="" alt="" id="seeImg"/>
                    </div>
                </div>
            </div>
            <div class="col-md-1" >
                <input class="form-control" name="iconColor" type="color" id="iconColor"/>
            </div>
            <div class="col-md-1">
                <span class="btn btn-success fileinput-button">
                        <i class="glyphicon glyphicon-plus-sign"></i>
                        <label>上传</label>
                        <input id="fileupload" type="file" name="media"/>
                </span>
                <input class="form-control" name="icon" id="coverImage" type="hidden"/>
            </div>
            <div class="col-md-6">
                <label for="picSelect">目录图标<span class="help-block">目录图标建议尺寸：32像素 * 32像素,图片格式为png,透明.</span></label>
            </div>
        </div>
        <div class="form-group">
            <label class="col-md-2 control-label">页面类型</label>
            <div class="col-md-10">
                <select class="form-control" name="pageType" options="pageType" id="pageType"></select>
            </div>
        </div>
        <div class="form-group bannerPannel" hidden >
            <label class="col-md-2 control-label">banner</label>
            <span class="bannerHelp"> 建议尺寸：380像素 * 150像素</span>
            <div class="col-md-10 ">
                <div class="bannerList" style="display: inline-block">
                    <div class="plus-block" id="addNewsItemButton" style="position: relative;display: inline-block">
                    <span class="btn  fileinput-button" style="background-color: transparent;top:-10px">
                        <i class="glyphicon glyphicon-plus-sign"></i>
                        <input id="bannerUpload" type="file" name="media"/>
                    </span>
                        <input class="form-control bannerImgs" name="bannerImgs" id="bannerImgs" type="hidden" />
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-md-2 control-label">编码</label>
            <div class="col-md-10">
                <input class="form-control" name="code" type="text" />
            </div>
        </div>
        <div class="form-group">
            <label class="col-md-2 control-label" >排序</label>
            <div class="col-md-10">
                <input class="form-control" name="sort" type="text" placeholder="从小到大" />
            </div>
        </div>
        <div class="form-group">
            <label class="col-md-2 control-label">备注</label>
            <div class="col-md-10">
                <input class="form-control" name="remark" type="text" />
            </div>
        </div>
        <div class="form-group">
            <label class="col-md-2 control-label">上级节点</label>
            <div class="col-md-10">
                <input class="form-control" name="parentName" type="text" readonly />
                <input class="form-control" name="parent" type="hidden" />
            </div>
        </div>
    </form>
    <div id="edit_form_footer">
        <button type="button" class="btn btn-primary btn-small" id="edit_form_save">保存</button>
        <button type="button" class="btn btn-default btn-small dol-hideModal" id="edit_form_cancel">取消</button>
    </div>
</div>



<% include ../common/footer.ejs %>


<% include ../common/script.ejs %>

<script src="<%= global.config.path.publicPath %>/libs/clipboard/clipboard.min.js"></script>

</body>
</html>
